<!DOCTYPE html>
<!--
honghiepcao@gmail.com
-->
<html>
<head>
<title>LIGHTBOX EXAMPLE</title>
<script>
function LightBox(){
	this.close = function(){
		var lightOverlay = document.getElementById('fullhappy_light_box_light');
		var fadeOverlay = document.getElementById('fullhappy_light_box_fade');
		if (lightOverlay != null && fadeOverlay != null) {
			lightOverlay.parentNode.removeChild(lightOverlay);
			fadeOverlay.parentNode.removeChild(fadeOverlay);
		}
	};
	this.open = function(){
		var fadeOverlay= document.createElement('div');
		var lightOverlay= document.createElement('div');
		var closeLightBoxButton = document.createElement('div');
		fadeOverlay.setAttribute('id','fullhappy_light_box_fade');
		/*fadeOverlayDiv.setAttribute('class','fullhappy_light_box_fade');*/
		fadeOverlay.setAttribute('style','position: fixed;'
											+'top: 0%;'
											+'left: 0%;'
											+'width: 100%;'
											+'height: 100%;'
											+'background-color: #777777;'
											+'z-index: 1001;'
											+'-moz-opacity: 0.8;'
											+'opacity: .80;'
											+'filter: alpha(opacity = 80);');
		
		lightOverlay.setAttribute('id','fullhappy_light_box_light');
		//lightOverlayDiv.setAttribute('class','fullhappy_light_box_light');
		lightOverlay.setAttribute('style','position: absolute;'
											+'box-shadow:0 0 20px #000000;'
											+'width: 400px;'
											+'height: 200px;'
											+'padding: 16px;'
											+'background-color: white;'
											+'z-index: 1002;'											
											+'border-radius: 4px;');
		
		closeLightBoxButton.setAttribute('id', 'fulhappy_light_box_close_box_button');
		//closeLightBoxButton.setAttribute('class', 'fulhappy_light_box_close_box_button');
		closeLightBoxButton.setAttribute('style', 'background-color: #0C0C0C;'
													+'border: 2px solid #FFFFFF;'
													+'border-radius: 10px;'
													+'box-shadow: 0 0 6px #000000;'
													+'color: #FFFFFF;'
													+'cursor: pointer;'
													+'font-size: 11px;'
													+'height: 16px;'
													+'position: absolute;'
													+'right: -8px;'
													+'text-align: center;'
													+'top: -8px;'
													+'width: 16px;');

		closeLightBoxButton.appendChild(document.createTextNode('x'));
		closeLightBoxButton.addEventListener('click', this.close, true);
		var body = document.getElementsByTagName('body')[0];
		body.appendChild(fadeOverlay);
		
		lightOverlay.appendChild(closeLightBoxButton);
		body.appendChild(lightOverlay);
		
		var maxHeight = fadeOverlay.offsetHeight;
		var maxWidth = fadeOverlay.offsetWidth;
		lightOverlay.style.top = (maxHeight - lightOverlay.offsetHeight) / 2 + 'px';
		lightOverlay.style.left = (maxWidth - lightOverlay.offsetWidth) / 2 + 'px';
		
	};
}
</script>
</head>
<body>
	<script>
		var a = new LightBox;
		a.open();
	</script>
	<p>
		To display a lightbox click <a
			href="javascript:void(0)" onclick="a.open()">here</a>
	</p>

	
</body>
</html>
